<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${site.name} - Powered by JEECMS</title>
<link href="${resSys}/front.css" rel="stylesheet" type="text/css"/>
<link type="text/css" rel="stylesheet" href="/${res}/css/index.css" />
<script src="${resSys}/jquery.js" type="text/javascript"></script>
<script src="${resSys}/front.js" type="text/javascript"></script>

<!-- 头像上传 -->
<script src="/${res}/head/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/${res}/css/bootstrap.min.css">
<link href="/${res}/head/cropper.min.css" rel="stylesheet">
<link href="/${res}/head/sitelogo.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/${res}/css/font-awesome.min.css">

<script src="/${res}/head/bootstrap.min.js"></script>
<script src="/${res}/head/cropper.js"></script>
<script src="/${res}/head/sitelogo.js"></script>

<style type="text/css">
.avatar-btns button {
	height: 35px;
}
</style>
<!-- <script type="text/javascript">
$(function() {
	$("#jvForm").validate();
});
</script> -->

<!--[if lt IE 9]> 
<script src="/${res}/js/html5shiv.min.js"></script>
<script src="/${res}/js/respond.min.js"></script>
<![endif]-->

</head>

<body>
[#include "../include/top.html"/]
[#include "../include/header.html"/]
<div class="member-con">
  <div class="m-pos"><a href="${base}/">首页</a> > <span>会员中心</span></div>
  <div class="member clearfix">
    <div class="memberLeft clearfix"> 
      <div class="member-nav">
        <ul>
        <li><a href="${base}/member/index.jspx" class="on">个人资料</a></li>
        <li><a href="${base}/member/contribute_list.jspx">投稿管理</a></li>
        <li><a href="${base}/member/doc_list.jspx?modelId=9">文档管理</a></li>
        <li><a href="${base}/member/resume.jspx">应聘管理</a></li>
        <li><a href="${base}/member/mycomments.jspx">我的评论</a></li>
        <li><a href="${base}/member/myguestbook.jspx">我的留言</a></li>
        <li><a href="${base}/member/collection_list.jspx">我的收藏</a></li>
        <li><a href="${base}/member/message_mng.jspx">站内信息</a></li>
        <li><a href="${base}/member/account.jspx">服务中心</a></li>
         [@bus_custom_list]
        		[#list tag_list as a]
        			 <li><a href="${base}/member/record.jspx?formId=${a.id!}">${a.name!}</a></li> 
        		[/#list]
          [/@bus_custom_list]	
        </ul>
      </div>
      <div class="member-main">
        <div class="member-child"><a href="${base}/member/index.jspx">用户信息</a>|<a href="${base}/member/profile.jspx">修改个人资料</a>|<a href="${base}/member/portrait.jspx" data-toggle="modal" data-target="#avatar-modal" class="on">更换头像</a>|<a href="${base}/member/pwd.jspx">修改密码</a></div>
        <div class="member-text">
			<img id="preImg1" src="${user.userImg!}"><button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#avatar-modal" style="margin: 10px;">修改头像</button>
            <!-- 上传头像 -->
            <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
		<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->
			<form class="avatar-form" id="form1" action="profile.jspx" method="post">
				<input id="uploadImgPath1" name="userImg" style="width:220px" value="${user.userImg!}" type="hidden"/>
				<input type="hidden" id="nextUrl" name="nextUrl" value="index.jspx" />
				<div class="modal-header">
					<button class="close" data-dismiss="modal" type="button">&times;</button>
					<h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
				</div>
				<div class="modal-body">
					<div class="avatar-body">
						<div class="avatar-upload">
							<input class="avatar-src" name="avatar_src" type="hidden">
							<input class="avatar-data" name="avatar_data" type="hidden">
							<label for="avatarInput" style="line-height: 35px;">图片上传</label>
							<button class="btn btn-danger"  type="button" style="height: 35px;" onClick="$('input[id=avatarInput]').click();">请选择图片</button>
							<span id="avatar-name"></span>
							<input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
						<div class="row">
							<div class="col-md-9">
								<div class="avatar-wrapper"></div>
							</div>
							<div class="col-md-3">
								<div class="avatar-preview preview-lg" id="imageHead"></div>
								<!--<div class="avatar-preview preview-md"></div>
						<div class="avatar-preview preview-sm"></div>-->
							</div>
						</div>
						<div class="row avatar-btns">
							<div class="col-md-4">
								<div class="btn-group">
									<button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
								</div>
								<div class="btn-group">
									<button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
								</div>
							</div>
							<div class="col-md-5" style="text-align: right;">								
								<button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
								</span>
							  </button>
							  <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
								  <!--<span class="fa fa-search-plus"></span>-->
								</span>
							  </button>
							  <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
								  <!--<span class="fa fa-search-minus"></span>-->
								</span>
							  </button>
							  <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
									<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214">
							   </button>
							</div>
							<div class="col-md-3">
								<button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
        </div>
      </div>
    </div>
    [#include "../include/member-right.html" /]
    <div class="m-sj"></div>
  </div>
</div>
<script src="/${res}/head/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//做个下简易的验证  大小 格式 
	$('#avatarInput').on('change', function(e) {
		var filemaxsize = 1024 * 5;//5M
		var target = $(e.target);
		var Size = target[0].files[0].size / 1024;
		if(Size > filemaxsize) {
			alert('图片过大，请重新选择!');
			$(".avatar-wrapper").childre().remove;
			return false;
		}
		if(!this.files[0].type.match(/image.*/)) {
			alert('请选择正确的图片!')
		} else {
			var filename = document.querySelector("#avatar-name");
			var texts = document.querySelector("#avatarInput").value;
			var teststr = texts; //你这里的路径写错了
			testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
			filename.innerHTML = testend;
		}
	
	});

	$(".avatar-save").on("click", function() {
		var img_lg = document.getElementById('imageHead');
		// 截图小的显示框内的内容
		html2canvas(img_lg, {
			allowTaint: true,
			taintTest: false,
			onrendered: function(canvas) {
				canvas.id = "mycanvas";
				//生成base64图片数据
				var dataUrl = canvas.toDataURL("image/jpeg");
				var $Blob= getBlobBydataURI(dataUrl,'image/jpeg');
	            var formData = new FormData();
	            formData.append("uploadFile", $Blob ,"file_"+Date.parse(new Date())+".jpeg");
	            formData.append("uploadNum", 1);
				var newImg = document.getElementById("img");
				newImg.src = dataUrl;
				imagesAjax(formData)
			}
		});
	})
	
	function imagesAjax(src) {
		$.ajax({
			url: "o_upload_image.jspx",
			data: src,
			type: "POST",
		    dataType:"text",  
		    processData : false,         // 告诉jQuery不要去处理发送的数据  
		    contentType : false,        // 告诉jQuery不要去设置Content-Type请求头  
			success: function(re) {
				$("#uploadImgPath1").val(re);
				$("#preImg1").attr("src",re);
				$('#form1').submit();
			}
		});
	}
	
    /**
     * 根据base64 内容 取得 bolb
     *
     * @param dataURI
     * @returns Blob
     */
    function getBlobBydataURI(dataURI,type) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type:type });
    }
</script>
[#include "../include/footer.html"/]
</body>
</html>